<template>
  <view>
    <u-navbar
      is-back="true"
      back-icon-color="#f6f6f6"
      :title="navTitle"
      title-color="#f6f6f6"
      :background="navBackground"
    ></u-navbar>
    <!--顶部tab栏-->
    <!-- 	<u-tabs ref="tabs" :list="list" bg-color="#e2edfb" item-width="25%"  active-color="#76a0d2" @change="tabChange"
			inactive-color="#b0b3ba" font-size="30" :current="currentIndex" bold="true"></u-tabs> -->
    <!--存放文章卡片-->
    <view v-if="passageList.length">
      <u-grid :col="2">
        <block v-for="(item, index) in passageList" :key="index">
          <u-grid-item :border="false">
            <view class="passage-card" @click="navtoDetail(item.cloth_id)">
              <view class="image-box">
                <image :src="item.cloth_preImg" mode="aspectFill"></image>
              </view>
              <view class="description">
                <view class="passage-keywords">{{ item.cloth_name }}</view>
                <view class="writer-info">
                  <view style="display: flex; align-items: center">
                    <view class="writer-avatar">
                      <image :src="item.auth_avatar"></image>
                    </view>
                    <view class="writer-nickname">{{ item.auth_name }}</view>
                  </view>
                  <view
                    v-if="item.auth_id != user_id"
                    :class="
                      'iconfont ' +
                      (item.is_like ? 'icon-like' : 'icon-no-like')
                    "
                    @tap.stop="userlike(index, item.is_like, item.cloth_id)"
                    ><text class="like-count">{{ item.like_count }}</text></view
                  >
                </view>
              </view>
            </view>
          </u-grid-item>
        </block>
      </u-grid>
    </view>
    <view v-else class="empty-box" :style="{ height: windowHeight + 'px' }">
      <view>
        <image
          src="https://nightowl.top/static/images/icons/empty.png"
          mode="widthFix"
        ></image>
        <view
          >你的衣橱里还没有{{ type == 'save' ? '收藏' : ''
          }}{{ type == 'like' ? '点赞' : ''
          }}{{ type == 'history' ? '浏览' : '' }}过穿搭哦~
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let app = getApp();
export default {
  data() {
    return {
      navBackground: app.globalData.navBackground,
      windowHeight: 0,
      navTitle: '',
      // list: [{
      // 	name: '春季',
      // 	group_id: '1'
      // }, {
      // 	name: '夏季',
      // 	group_id: '2'
      // }, {
      // 	name: '秋季',
      // 	group_id: '3'
      // }, {
      // 	name: '冬季',
      // 	group_id: '4'
      // }],
      currentIndex: 0,
      isLike: false,
      user_id: '',
      passageList: [],
      type: '',
    };
  },
  onLoad(options) {
    //获取当前屏幕的高度
    uni.getSystemInfo({
      success: (res) => {
        this.windowHeight = res.windowHeight;
      },
    });
    this.type = options.type;
    switch (this.type) {
      case 'save':
        this.navTitle = '我的收藏';
        break;
      case 'history':
        this.navTitle = '浏览历史';
        break;
      case 'like':
        this.navTitle = '我赞过的';
        break;
      default:
        app.showToast('功能开发中,敬请期待哦~');
    }
    this.loadPassageList();
  },
  onShow() {
    if (
      typeof app.globalData.user_id != 'undefined' &&
      app.globalData.user_id != null
    ) {
      this.user_id = app.globalData.user_id;
    }
  },
  methods: {
    userlike: function (index, is_like, cloth_id) {
      if (!app.globalData.isLogin) {
        uni.showModal({
          title: '温馨提示',
          content: '检测到您还没有登录，是否前往登录？',
          success: (res) => {
            if (res.confirm) {
              uni.switchTab({
                url: '/pages/mine/mine',
              });
            }
          },
        });
        return;
      }
      uni.request({
        url: app.globalData.baseUrl + '/cloth/userLike',
        data: {
          user_id: app.globalData.user_id,
          cloth_id: cloth_id,
          token: app.globalData.token,
          is_like: is_like,
        },
        success: (res) => {
          if (!res.data.code) {
            this.passageList[index].is_like = !is_like;
            this.passageList[index].like_count += is_like ? -1 : 1;
            app.showToast(!is_like ? '点赞收到了~' : '已取消点赞~');
          } else {
            app.showToast(res.data.msg);
          }
        },
      });
    },
    loadPassageList() {
      let requestUrl = '';
      switch (this.type) {
        case 'save':
          requestUrl = 'getSaveList';
          break;
        case 'history':
          requestUrl = 'getHistory';
          break;
        case 'like':
          requestUrl = 'getLikeList';
          break;
        default:
          break;
      }
      uni.request({
        url: app.globalData.baseUrl + '/cloth/' + requestUrl,
        method: 'GET',
        data: {
          user_id: app.globalData.user_id,
        },
        success: (res) => {
          let result = res.data;
          if (!result.code) {
            this.passageList = result.list;
          } else {
            app.showToast(result.msg);
          }
        },
        fail: (err) => {
          app.showToast('请求失败,请稍后再试~');
          console.log('请求失败:', err.errMsg);
        },
      });
    },
    tabChange(index) {
      this.currentIndex = index;
      this.loadPassageList();
    },
    navtoDetail(id) {
      uni.navigateTo({
        url: '/pages/cloth/details?id=' + id,
      });
    },
  },
};
</script>

<style lang="scss">
.passage-card {
  width: 90%;
  border-radius: 20rpx;
  overflow: hidden;
}

.image-box {
  width: 100%;
}

.u-border-right::after {
  border: none !important;
}

.image-box image {
  width: 100%;
}

.description {
  padding-left: 20rpx;
}

.passage-keywords {
  width: 100%;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 10rpx;
}

.writer-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.writer-avatar {
  width: 50rpx;
  height: 50rpx;
  border: 4rpx #fff solid;
  margin-top: 6rpx;
}

.writer-avatar image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4rpx #e6b1c7 solid;
  box-sizing: border-box;
}

.writer-nickname {
  font-size: 24rpx;
  font-weight: bold;
  margin-left: 10rpx;
  overflow: hidden;
  max-width: 180rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.like-count {
  font-size: 26rpx;
  line-height: 16px;
  margin-left: 4rpx;
  color: #242424;
}

.empty-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60%;
  margin: 0px auto;
  margin-top: -100rpx;
  text-align: center;
  color: #6c6c6c;
}

.empty-box image {
  width: 100%;
  margin-bottom: 60rpx;
}
</style>
